<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap Template</title>

    <!-- 新 Bootstrap 核心 CSS 文件  这三个文件 使用 cdn 方式没有加载出来 -->
	<!-- <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> -->
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<link rel="stylesheet" href="../css/commontest.css">
	<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
	
	
  </head>
  <body>
  <!-- 导航 开始 -->
  <!-- 为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。
  		折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，
  		第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。
  		这些会切换为 .nav-collapse <div> 中的元素 -->
	<div class="navbar-wrapper">
    	<div class="container">
	    <nav class="navbar navbar-default ">
	      <div class="container-fluid">
	        <!-- Brand and toggle get grouped for better mobile display -->
	        <div class="navbar-header">
	          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
	            <span class="sr-only">Toggle navigation</span>
	            <!-- 注意这里多少个 span 就显示几条 横线 -->
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	          </button>
	          <a class="navbar-brand" id="py-brand" href="#"><span>dfasdfa</a>
	        </div>
	
	        <!-- 导航集合 -->
	        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	          <ul class="nav navbar-nav" id="py-ul">
	            <li class="active"><a href="/">a <span class="sr-only">(current)</span></a></li>
	            <li ><a href="/weekly_list">b</a></li>
	            <li ><a href="/raiders_list">c</a></li>
	            <li ><a href="/about">d</a></li>
	            <li ><a href="/about_us">e</a></li>
	            <li class="toright"><a href="/about_us">登录|注册</a></li>
	          </ul>
	        </div><!-- /.navbar-collapse -->
	      </div><!-- /.container-fluid -->
	    </nav>
	  </div>
	</div>
	<!-- 导航 结束 -->
	
	<!-- 图片轮播 开始 -->
    <div id="myCarousel" class="carousel slide">
      <div class="carousel-inner">
        <div class="item active">
          <img src="img/examples/slide-01.jpg" alt="">
          <div class="container">
            <div class="carousel-caption">
              <h1>如何加入本网站.</h1>
              <p class="lead">页面很棒，页面很炫，页面很好看</p>
              <a class="btn btn-large btn-primary" href="#">马上注册</a>
            </div>            
          </div>
        </div>
        <div class="item">
          <img src="img/examples/slide-02.jpg" alt="">
          <div class="container">
            <div class="carousel-caption">
              <h1>如何使用本网站.</h1>
              <p class="lead">采用当今世界最流行的前端框架，给用户一流的用户体验</p>
              <a class="btn btn-large btn-primary" href="#">了解更多</a>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="img/examples/slide-03.jpg" alt="">
          <div class="container">
            <div class="carousel-caption">
              <h1>本网站还有更多优势.</h1>
              <p class="lead">消除旧网站的视觉疲劳，从现在开始.</p>
              <a class="btn btn-large btn-primary" href="#">链接到BootStrap</a>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>
	<!-- 图片轮播 结束 -->
	
	<!-- 地图 显示 开始-->
	<div id="mapDiv" class="container divBlock">
		<script type="text/javascript"
			src="http://api.map.baidu.com/api?ak=CPDGYNM4QbeZVjQSbH5Qh6NL&v=2.0"></script>
		<!-- <script type="text/javascript" src="../js/baidumap/CurveLine.min.js"></script> -->
		<script type="text/javascript" src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
	
		<script type="text/javascript">
			// 百度地图API功能
			var map = new BMap.Map("mapDiv");    // 创建Map实例
			map.centerAndZoom(new BMap.Point(120.2099600000,30.2139150000), 15); 
			map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
			map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
			addMarker(new BMap.Point(120.2099600000,30.2139150000));
			
			var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
								'<img src="../img/baidu.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
								'地址：北京市海淀区上地十街10号<br/>电话：(010)59928888<br/>简介：百度大厦位于北京市海淀区西二旗地铁站附近，为百度公司综合研发及办公总部。' +
							  '</div>';

			//创建检索信息窗口对象
			var searchInfoWindow = null;
			searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
					title  : "百度大厦",      //标题
					width  : 290,             //宽度
					height : 105,              //高度
					panel  : "panel",         //检索结果面板 
					enableAutoPan : true,     //自动平移
					searchTypes   :[
						BMAPLIB_TAB_SEARCH,   //周边检索
						BMAPLIB_TAB_TO_HERE,  //到这里去
						BMAPLIB_TAB_FROM_HERE //从这里出发
					]
				});			
			function addMarker(point){
				  var marker = new BMap.Marker(point);
				  map.addOverlay(marker);//添加标注
				  marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
				  marker.addEventListener("click", function(e){
					  searchInfoWindow.open(marker);
				  })
			}
		
		</script>
	</div>
	<!-- 地图 显示 结束-->
	
	<!-- 版权信息 开始 -->
	<div class="container rooter">
      <footer>
        <p>&copy; 2013 Web前端研究, Good. &middot; <a href="#">学习资料</a> &middot; <a href="#">夏森</a></p>
		<p>2014-2015 All Rights Reserved.</p>
      </footer>    
    </div>
	<!-- 版权信息 结束 -->

	
	
	<!--  js 开始 -->
	<!-- 将 js 文件写到最后 ， 提升加载速度 -->
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<!-- <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> -->
	<script src="../js/jquery.min.js"></script>
	
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<!-- <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> -->
	<script src="../js/bootstrap.min.js"></script>
	
	<!--  js 结束 -->
  </body>
</html>